<template>
    <div>
        <center><h3>个人信息</h3></center>
        <el-form ref="updateForm"  v-model="doctor"  label-width="80px" class="login-box">

            <center><el-upload
                    class="avatar-uploader"
                    action="http://119.29.60.153:8002/doctorOss/fileoss/uploadFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="doctor.avatar" :src="doctor.avatar" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
                点击上传头像
            </center>
            <br>
            <el-form-item label="账号"  class="out"  >
                <el-input readonly="readonly" v-model="doctor.id" type="text" class="inputs" placeholder="请输入账号"  />
            </el-form-item>
            <el-form-item label="姓名" class="out" prop="name" >
                <el-input  readonly="readonly" v-model="doctor.name"  type="text" class="inputs"  placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="身份证号" class="out"  prop="idCard">
                <el-input readonly="readonly" v-model="doctor.idCard" type="text" class="inputs" placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="性别"  class="out">
                <el-radio-group readonly="readonly" v-model="doctor.sex">
                    <el-radio :label="1" style="margin-left: 50px" disabled>男</el-radio>
                    <el-radio :label="2" disabled>女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="简介" class="out"  >
                <el-input readonly="readonly" v-model="doctor.info" type="text" class="inputs" placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="资历" class="out" >
                <el-input readonly="readonly" v-model="doctor.career" type="text" class="inputs" placeholder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="电话" class="out" >
                <el-input readonly="readonly" v-model="doctor.phone" type="text" class="inputs" placeholder="请输入电话"/>
            </el-form-item>
            <el-form-item label="水平" class="out" >
                <el-input v-if="doctor.level==1" readonly="readonly" type="text" class="inputs" placeholder="专家"/>
                <el-input v-if="doctor.level==2" readonly="readonly" type="text" class="inputs" placeholder="普通"/>
            </el-form-item>
            <el-form-item label="科室" class="out" >
                <el-select disabled="disable"  v-model="doctor.departmentId" placeholder="请选择科室" style="width: 300px;">
                    <el-option v-for="item in secondList" :label="item.name" :key="item.id" :value="item.id" ></el-option>
                </el-select>
            </el-form-item>
            <center>
                <el-form-item>
                    <el-button type="primary" @click="OnSubmit" >保存修改</el-button>
                </el-form-item>
            </center>
        </el-form>
    </div>
</template>

<script>
    import axios from  'axios'
    import {ElMessage} from "element-plus";
    export default {
        name: "ReceptionUser",
        data(){
            return{
                radio: '男',
                imageUrl: '',
                doctorId:'',
                secondList:{
                    id:'',
                    name:'',
                },
                doctor: {
                    avatar:'',
                    deleted:0,
                    gmtCreate:'',
                    gmtUpdate:'',
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    password:'',
                    phone:'',
                    departmentId: '',
                },
                rules:{
                    name:[
                        {required:true,message:"名称不可为空",trigger:'blur'}
                    ],
                    idCard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],

                },

            };
        },
        created(){
            this.create();
            this.getDepartment()
        },
        methods: {
            create(){
                this.doctorId=localStorage.getItem("id");
                axios.get("http://119.29.60.153:8001/doctorservice/doctor/GetDoctorById/"+this.doctorId).then(resp=> {
                    this.doctor=resp.data.data.doctor;
                    console.log(this.doctor);
                })

            },
            OnSubmit(){

                axios.post("http://119.29.60.153:8001/doctorservice/doctor/updateDoctor",this.doctor).then(resp=> {

                    if(resp.data.success==true){
                        alert("修改成功!");
                        location.reload();
                    }
                    else {
                        ElMessage.success("添加失败!");
                        this.addFormVisible=false;

                    }
                })

            },
            getDepartment(){
                axios.get("http://119.29.60.153:8001/doctorservice/department/getSecondDepartment").then(resp=> {
                    this.secondList = resp.data.data.secondList;
                    console.log(this.secondList);
                })
            },
            handleAvatarSuccess(res, file) {
                this.doctor.avatar = res.data.url;
                ElMessage.success("上传成功，请点击保存修改保存头像修改!");
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .login-box{

        padding: 10px 35px 15px 35px;

    }
    .out{
        margin-left: 350px;
    }
    .inputs{
        width: 500px;
    }
    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

</style>